<template>
  <footer class="footer" v-show="list.length">
    <span class="todo-count">
      剩余<strong>{{ leftCount }}</strong>
    </span>
    <ul class="filters">
      <li>
        <a @click="changeStatus('all')" :class="{ selected: status === 'all' }" href="javascript:;">全部</a>
      </li>
      <li>
        <a @click="changeStatus('active')" :class="{ selected: status === 'active' }" href="javascript:;">未完成</a>
      </li>
      <li>
        <a @click="changeStatus('completed')" :class="{ selected: status === 'completed' }" href="javascript:;">已完成</a>
      </li>
    </ul>
    <button class="clear-completed" @click="clearDone()">清除已完成</button>
  </footer>
</template>

<script lang="ts" setup>
// 🎯 这样书写更加方便呀，不需要 useStore 和 导入 TodoState
import store, { Status } from '@/store'
import { computed, toRefs } from '@vue/reactivity'

const { status, list } = toRefs(store.state)

// 删除已完成任务
const clearDone = () => {
  store.commit('clearDone')
}

// 计算剩余任务数量
const leftCount = computed(() => {
  // 💥 注意这里 getters 的类型为 any
  return store.getters.leftCount
})

// 高亮切换效果
const changeStatus = (status: Status) => {
  store.commit('changeStatus', status)
}
</script>
